﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dribble Ball</title>
    <link rel="stylesheet" href="../css/db.css" />
    <link rel="stylesheet" href="../css/colorbox.css" />
    <script type="text/javascript" src="../js/track.js" />
</head>
<body>
    <div id="status">
        <div id="counter">
        </div>
    </div>
    <div id="win">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            width="800" height="1200" version="1.1">
             <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color: #F2E2CB; stop-opacity: 0.4" />
                <stop offset="100%" style="stop-color: #1B6325; stop-opacity: 0.4" />
            </linearGradient>
            <rect width="100%" height="100%" fill="url(#grad1)" />
            <g id="main">
                <line x1="0" y1="0" x2="0" y2="2400" db-pad="wood" />
                <line x1="800" y1="2400" x2="800" y2="0" db-pad="wood" />
                <g transform="translate(700 100)" db-cat="reward"/>
                <circle cx="100" cy="300" r="60" db-pad="ice" />
                <circle cx="640" cy="500" r="60" db-pad="bad" />
                <circle cx="0" cy="620" r="120" db-pad="ground" />
                <g transform="translate(50 830)" db-cat="reward"/>
                <circle cx="420" cy="810" r="110" db-pad="wood" />
                 <g transform="translate(300 1100)" db-cat="reward"/>
                <circle cx="520" cy="1400" r="280" db-pad="ground" />
                <!--target-->
                <line x1="120" y1="1000" x2="280" y2="1000" db-cat="target" />
                <line x2="120" y2="1005" x1="280" y1="1005" db-pad="wood" />
                <circle cx="120" cy="1000" r="5" db-pad="wood" />
                <circle cx="280" cy="1000" r="5" db-pad="wood" />
            </g>
            <rect id="dummy" width="100%" height="100%" fill-opacity="0">
            </rect>
            <g id="front">
                <defs>
                    <marker id="mTriangle" markerWidth="50" markerHeight="100" refX="50" refY="50" orient="auto">
                        <path d="M 0 0 50 50 0 100 Z" style="fill: black;" />
                    </marker>
                </defs>
            </g>
        </svg>
    </div>
    <div id="skip">
        &lt;&lt; Skip Preview
    </div>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.countdown.js"></script>
    <script type="text/javascript" src="../js/jquery.colorbox.js"></script>
    <script type="text/javascript" src="../js/svg.js"></script>
    <script type="text/javascript" src="../js/db.js"></script>
    <script type="text/javascript">
    //<![CDATA[
        db.path = [{ x: 400, y: 0 }, { x: 400, y: 1200}];

        db.isInBoundary = function (x, y) {
            return y < 1200;
        }
        camera.centerOffset = 0.15;
        //highlightDesign();
        startGame();
    //]]>
    </script>
</body>
</html>
